<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Click to Input Text</title>
<style>
    #editableDiv {
        opacity: 0; /* 使div不可见但仍然可以接收输入 */
        position: absolute; /* 避免占用页面空间 */
        top: -100;
        left: -1000;
        width: 110px; /* 最小化可编辑区域的尺寸 */
        height: 10px; /* 最小化可编辑区域的尺寸 */
        overflow: hidden; /* 避免滚动条出现 */
    }
</style>
</head>
<body>

<div id="editableDiv" contenteditable="true"></div>
<canvas id="canvas" width="600" height="400" style="border:1px solid #000;"></canvas>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var editableDiv = document.getElementById('editableDiv');

    canvas.addEventListener('click', function() {
        editableDiv.focus(); // 当画布被点击时，设置焦点到editableDiv
    });


     // 处理compositionstart事件
     editableDiv.addEventListener('compositionstart', function() {
        isComposing = true;
        console.log('compositionstart');
    });

    // 处理compositionupdate事件
    editableDiv.addEventListener('compositionupdate', function(e) {
      
        console.log('compositionupdate');	
    });

    // 处理compositionend事件
    editableDiv.addEventListener('compositionend', function() {
       
        console.log('compositionend');	
    });

    editableDiv.addEventListener('input', function() {
        // 每次输入发生变化时，清除画布并重新绘制文本
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = '16px Arial';
        ctx.fillStyle = 'black';
        ctx.fillText(editableDiv.innerText || "Click here to start typing...", 10, 50); // 如果editableDiv为空，显示提示文本
    });
});
</script>

</body>
</html>
